<template>
  <div>
    <div class="sm:flex sm:items-center">
      <div class="sm:flex-auto">
        <h1 class="text-2xl font-semibold text-gray-900">酿造管理</h1>
        <p class="mt-2 text-sm text-gray-700">查看和管理所有酿造批次</p>
      </div>
      <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
        <button
          type="button"
          class="inline-flex items-center justify-center rounded-md border border-transparent bg-brew-amber px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-brew-amber focus:ring-offset-2 sm:w-auto"
          @click="$router.push({ name: 'brewing-new' })"
        >
          新建批次
        </button>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="mt-8 flex flex-col sm:flex-row">
      <div class="flex space-x-4">
        <select
          class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-brew-amber focus:outline-none focus:ring-brew-amber sm:text-sm"
        >
          <option value="">所有状态</option>
          <option value="planning">计划中</option>
          <option value="brewing">酿造中</option>
          <option value="fermenting">发酵中</option>
          <option value="conditioning">熟成中</option>
          <option value="completed">已完成</option>
        </select>
        <input
          type="text"
          placeholder="搜索批次..."
          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
        />
      </div>
    </div>

    <!-- 批次列表 -->
    <div class="mt-8 flex flex-col">
      <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table class="min-w-full divide-y divide-gray-300">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">批次</th>
                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">配方</th>
                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">状态</th>
                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">开始日期</th>
                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">预计完成</th>
                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                    <span class="sr-only">操作</span>
                  </th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200 bg-white">
                <tr v-for="batch in batches" :key="batch.id" class="hover:bg-gray-50">
                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                    {{ batch.name }}
                  </td>
                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ batch.recipe }}</td>
                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                    <span
                      class="inline-flex rounded-full px-2 text-xs font-semibold leading-5"
                      :class="{
                        'bg-green-100 text-green-800': batch.status === 'completed',
                        'bg-yellow-100 text-yellow-800': batch.status === 'brewing',
                        'bg-blue-100 text-blue-800': batch.status === 'fermenting',
                        'bg-gray-100 text-gray-800': batch.status === 'planning'
                      }"
                    >
                      {{ getStatusText(batch.status) }}
                    </span>
                  </td>
                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ formatDate(batch.startDate) }}</td>
                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ formatDate(batch.estimatedEndDate) }}</td>
                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                    <router-link
                      :to="{ name: 'recipe-detail', params: { id: batch.id }}"
                      class="text-brew-amber hover:text-amber-600"
                    >
                      详情
                    </router-link>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const batches = ref([
  {
    id: 1,
    name: 'BATCH-2023-001',
    recipe: 'Hoppy IPA',
    status: 'brewing',
    startDate: '2023-01-15',
    estimatedEndDate: '2023-02-15'
  },
  {
    id: 2,
    name: 'BATCH-2023-002',
    recipe: '比利时小麦啤酒',
    status: 'fermenting',
    startDate: '2023-01-20',
    estimatedEndDate: '2023-02-20'
  },
  {
    id: 3,
    name: 'BATCH-2023-003',
    recipe: '德式皮尔森',
    status: 'completed',
    startDate: '2023-01-10',
    estimatedEndDate: '2023-02-10'
  }
])

const getStatusText = (status) => {
  const statusMap = {
    planning: '计划中',
    brewing: '酿造中',
    fermenting: '发酵中',
    conditioning: '熟成中',
    completed: '已完成'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}
</script> 